<template>
	<div class="cljk-table tclb-box" :style="{height:tableH+'vh',width:'100%'}">
		<div class="tclb-false-box">
			<div class="scroll-box" :style="{'height': scollBoxHeight + 'px'}">
				<!-- scroll-box是用来撑起盒子的方法 -->
			</div>
		</div>
		<div class="tclb-table-box">
			<el-table :data="tableData" border style="width: 100%;" :header-row-style="{height:'30px'}"
				:header-cell-style="{
		    textAlign: 'center',
		    height: '30px',
		}" size="mini">

				<el-table-column prop="stopTime" label="开始时间"></el-table-column>
				<el-table-column prop="endStopTime" label="结束时间"></el-table-column>
				<el-table-column prop="flameOut" label="停车时长">
					<template slot-scope="scope">
						{{formatSecond(scope.row.flameOut)}}
					</template>
				</el-table-column>
				<el-table-column prop="lng" label="位置">
					<template slot-scope="scope">
						{{scope.row.lng+','+scope.row.lat}}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	
	import {getStopHistory} from '@/api/cljk.js'
	
	export default {

		name: 'tclb',
		props: {
			bottomHeight: {
				type: String,
				default: function() {
					return 37 + 'vh';
				},
				required: true
			},
			nodes: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			},
			curDay: {
				type: Object,
				default: function() {
					return null;
				},
				required: true
			},
			curHour: {
				type: Object,
				default: function() {
					return null;
				},
				required: true
			},
		},
		watch: {
			bottomHeight: function(val) {
				if (val === '37vh') {
					this.tableH = 28
				} else {
					this.tableH = 74
				}
			},
			nodes: function(val) {
				
			},
			curHour: function(val) {
				if (this.curDay && this.nodes) {
					var param = {
						vehId: this.nodes.id,
						startTime: this.curDay + ' ' + val.startHour,
						endTime: this.curDay + ' ' + val.endHour,
					}
					this.refreshlist(param)
				}
			},
			curDay: function(val) {
				if (this.curHour && this.nodes) {
					var param = {
						vehId: this.nodes.id,
						startTime: val + ' ' + this.curHour.startHour,
						endTime: val + ' ' + this.curHour.endHour,
					}
					this.refreshlist(param)
				}
			}

		},
		data() {
			return {
				tableH: 28,
				tableData: [],
				scollBoxHeight: 0, //假滚动条的高度
				scrollTopRowCount: 0, //一共向上滚动了多少行
				elTableHeight: '', //el-table的高度
				theadHeight: '', //表头的高度
				contentHeight: 0, //主要内容高度
				showRowCount: 0, //一共能显示多少行 
				falseBox: 0, //后边假盒子的高度
				pageInfo: {
					page: 1,
					total: 0,
					size: 20
				}
			}
		},
		methods: {
			formatSecond(time) {
			      const h = parseInt(time / 3600)
			      const minute = parseInt(time / 60 % 60)
			      const second = Math.ceil(time % 60)    
			 
			      const hours = h < 10 ? '0' + h : h
			      const formatSecond = second > 59 ? 59 : second
			      return `${hours > 0 ? `${hours}小时` : ''}${minute < 10 ? '0' + minute : minute}分${formatSecond < 10 ? '0' + formatSecond : formatSecond}秒`
			},
			

			refreshlist(param) {
				getStopHistory(param).then(res=>{
					if(res.code===200){
						
						let that = this;
						this.scollBoxHeight = 45 * res.data.length + 45; //多加一行，要不然滚动到底差一行
						this.$nextTick(() => {
							this.elTableHeight = document.querySelector('.tclb-table-box .el-table').offsetHeight;
							this.theadHeight = document.querySelector('.tclb-table-box .el-table__header-wrapper').offsetHeight;
							this.contentHeight = this.elTableHeight - this.theadHeight;
							this.showRowCount = Math.floor(this.contentHeight / 45);
							// 获取默认显示的前 <showRowCount> 条
							this.tableData = JSON.parse(JSON.stringify(res.data)).splice(0, this.showRowCount);
						})
						
						this.falseBox = document.querySelector('.tclb-false-box');
						this.falseBox.addEventListener('scroll', function(e) {
							that.scrollTopRowCount = Math.ceil(e.target.scrollTop / 45);
							// 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条
							that.tableData = JSON.parse(JSON.stringify(res.data)).splice(that
								.scrollTopRowCount, that
								.showRowCount);
						});
						if(res.data.length>0){
							this.$emit('tc-load',res.data)
						}
						
					}
				}).catch(err=>{
					console.log(err)
				})
			}

		},
		mounted() {
			
		}


	}
</script>


<style lang="scss" scoped>
	.tclb-box {
		width: 1000px;
		overflow: hidden;
		position: relative;

		.tclb-false-box {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0%;
			left: 0%;
			overflow: auto;

			.scroll-box {
				width: 100%;
				height: 1000px;
				position: absolute;
				top: 0%;
				left: 0%;
			}
		}

		.tclb-table-box {
			width: calc(100% - 20px);
			height: 100%;
			position: absolute;
			top: 0%;
			left: 0%;
		}
	}

	::v-deep .el-table {
		width: 100%;
		height: 100%;

		.el-table__row {
			height: 45px;

			td {
				padding: 0px
			}
		}
	}
</style>
